<template>
	<div>
		<div class="header">
			<a href="javascript:history.back(-1)"><img src="../../assets/liu/左箭头.png" /></a>
			<div class="content ">
				<span>购物车</span>
			</div>
			</div>
			<div class="tishi">
				<p>登录后同步电脑和手机购物车中的商品
				<a href="#/Login"><span>去登陆</span></a>
				</p>
			</div>
		     <div class="kongbai">
		     	<img src="../../assets/liu/download.png"/>
		     	<span class="one">购物车空空~买点啥</span>
		     	<a href="#/Llist"><span class="two">先逛逛</span></a>
		     	<div class="left"></div>
		     	<div class="right"></div>
		     	<span class="there">为你推荐</span>
		     </div>
		     <div class="list_one">
				<img src="../../assets/liu/2.png"/>
				<div class="list_cont">
					  	<em class="list_item">
						<span class="span_l">自营</span>
						<span class="span_m">法国红酒82拉菲</span>
					</em>
					<br />
					  <span>年久纯香 入口甘甜</span>
					  <br />
					   <span class="span_d">¥9999</span>
				  </div>
			</div>
			 <div class="list_one">
				<img src="../../assets/liu/2.png"/>
				<div class="list_cont">
					  	<em class="list_item">
						<span class="span_l">自营</span>
						<span class="span_m">法国红酒82拉菲</span>
					</em>
					<br />
					  <span>年久纯香 入口甘甜</span>
					  <br />
					   <span class="span_d">¥9999</span>
				  </div>
			</div>
	</div>
</template>

<script>
	export default{
		name:'shopping',
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
	}
	.header {
		height: 2%;
		position: relative;
	}
	
	.header img {
		width: 2.5rem;
		padding-left: 0.6rem;
		padding-top: 0.5rem;
	}
	
	.header span {
		font-size: 1.5rem;
		position: absolute;
		left: 43%;
		top: 28%;
	}
	.tishi{
	border-top: 1px solid #f2f2f2;	
	position: relative;
	}
	.tishi p{
		display: inline-block;
		padding-left: 1.3rem;
		padding-top: 0.8rem;
	}
	.tishi span{
		display: inline-block;
		width: 4rem;
		height: 1.5rem;
		border: 1px solid gray;	
		border-radius:5rem;
         color: gray;
         text-align: center;
         position: absolute;
         right: 1.2rem;
          top: 0.8rem;
	}
	.kongbai{
		margin-top: 1.1rem;
		height: 28rem;
		background:#f2f2f2 ;
		position: relative;
	}
	.kongbai img{
		width: 12rem;
		position: absolute;
		top:1rem;
		left:7.5rem ;
	}
	.kongbai .one{
		position: absolute;
		top:17rem;
		left:9.5rem ;
		opacity: 0.8;
	}
	.kongbai .two{
		display: inline-block;
		width: 6rem;
		line-height: 2.5rem;
		border: 1px solid gray;	
		border-radius:5rem;
		background: linear-gradient(0deg,#FA1E8C 0,#FC1E56 100%);
         color: white;
         text-align: center;
         position: absolute;
         right: 15rem;
          top: 20rem;
	}
	.kongbai .left{
		width: 2rem;
		height: 0.1rem;
		background:#FC1E56 ;
		 position: absolute;
         left :8.5rem;
          top: 26rem;
	}
	.kongbai .right{
		width: 2rem;
		height: 0.1rem;
		background:#FC1E56 ;
		 position: absolute;
         left :16.5rem;
         top: 26rem;
	}
	.kongbai .there{
		color:#FC1E56 ;
		font-size: 1.5rem;
		 position: absolute;
         left :11.1rem;
         top: 25rem;
	}
	.list_one{
		width: 40%;
		float: left;
		padding: 4%;
	}
	.list_one img{
		width: 100%;
		background: lightgray;
	}
	.list_cont .span_l{
		width: 3.5rem;
		height: 1rem;
		background: red;
		text-align: center;
		color: white;
		padding-right: 0.3rem;
	}
	.list_cont .span_d{
		color: red;
	}
</style>